
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>排行榜页面</title>
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Microsoft Yahei", sans-serif;
      background-color: #f5f5f5;
    }

    .container {
      width: 400px;
      margin: 20px auto;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;
    }

    /* 头部样式 */
    .header {
      background-color: #e63946;
      color: #fff;
      padding: 10px;
    }

    .header h1 {
      font-size: 20px;
      text-align: center;
      margin-bottom: 10px;
    }

    .nav {
      display: flex;
      justify-content: center;
    }

    .nav-btn {
      background-color: #d62828;
      color: #fff;
      border: none;
      padding: 8px 20px;
      margin: 0 5px;
      border-radius: 3px;
      cursor: pointer;
    }

    .nav-btn.active {
      background-color: #b71c1c;
    }

    /* 文章类型样式 */
    .article-type {
      background-color: #e63946;
      color: #fff;
      padding: 5px 10px;
      display: inline-block;
      margin: 10px;
      border-radius: 3px;
      font-size: 14px;
    }

    /* 文章项样式 */
    .article-item {
      padding: 10px;
      border-bottom: 1px solid #eee;
    }

    .article-top {
      background-color: #ff5252;
      color: #fff;
      width: 30px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      border-radius: 3px;
      margin-bottom: 5px;
      display: inline-block;
    }

    .article-img {
      width: 100%;
      height: auto;
      border-radius: 3px;
      margin-bottom: 5px;
    }

    .article-title {
      font-size: 16px;
      margin-bottom: 5px;
      color: #333;
    }

    .article-meta {
      font-size: 12px;
      color: #999;
    }

    .article-meta span {
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 头部区域 -->
    <header class="header">
      <h1>排行榜</h1>
      <nav class="nav">
        <button class="nav-btn active">好文精选</button>
        <button class="nav-btn">热门资讯</button>
      </nav>
    </header>

    <!-- 文章列表区域 -->
    <main class="article-list">
      <div class="article-type">文章</div>
      <article class="article-item">
        <div class="article-top">TOP 1</div>
        <img src="大作业2图片/3c6d55fbb2fb4316dd4a739430a87d2c08f7d3a6.webp" alt="donk" class="article-img">
        <div class="article-meta">
          <span class="view">9999 阅读</span>
          <span class="like">5200 点赞</span>
        </div>
      </article>
      <article class="article-item">
        <div class="article-top">TOP 2</div>
        <img src="大作业2图片/50da81cb39dbb6fd5ee4531b18289017972b376e.webp" alt="moNESY" class="article-img">
        <div class="article-meta">
          <span class="view">6666 阅读</span>
          <span class="like">5200 赞</span>
        </div>
      </article>
      <article class="article-item">
        <div class="article-top">TOP 3</div>
        <img src="大作业2图片/a5c27d1ed21b0ef46135a353ccc86ad580cb3efc.webp" alt="ZywOo" class="article-img">
        <div class="article-meta">
          <span class="view">6100阅读</span>
          <span class="like">5200点赞</span>
        </div>
      </article>
    </main>
  </div>
</body>

</html>
